@use "../utils/mixins";

// Handsontable Base Row and Col

@mixin output {
  // Required variables for bare theme
  .ht-root-wrapper:not([class*="ht-theme"]),
  .ht-portal:not([class*="ht-theme"]) {
    --ht-gap-size: 4px;
    --ht-checkbox-size: 16px;
    --ht-cell-horizontal-padding: 8px;
    --ht-cell-vertical-padding: 4px;
    --ht-font-size: 14px;
    --ht-line-height: 20px;
    --ht-letter-spacing: 0;
    --ht-border-color: #222222;
    --ht-foreground-color: #222222;
    --ht-background-color: #ffffff;
    --ht-header-foreground-color: #222222;
    --ht-header-background-color: #f7f7f9;
    --ht-header-row-foreground-color: #222222;
    --ht-header-row-background-color: #f7f7f9;
    --ht-cell-horizontal-border-color: #222222;
    --ht-cell-vertical-border-color: #222222;
    --ht-header-active-border-color: #1a42e8;
    --ht-header-active-foreground-color: #ffffff;
    --ht-header-active-background-color: #1a42e8;
    --ht-header-row-active-foreground-color: #fff;
    --ht-header-row-active-background-color: #1a42e8;
    --ht-cell-selection-border-color: #1a42e8;
    --ht-scrollbar-track-color: #f7f7f9;
    --ht-scrollbar-thumb-color: #a3a3a3;
  }

  // Root wrapper
  .ht-root-wrapper {
    @include mixins.font-family;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .htFocusCatcher {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    z-index: -1;
  }

  .ht-grid {
    flex: 1 1 auto;
    min-height: 0;
  }

  .handsontable {
    @include mixins.font-family;

    position: relative;
    font-size: var(--ht-font-size);
    line-height: var(--ht-line-height);
    font-weight: var(--ht-font-weight);
    letter-spacing: var(--ht-letter-spacing);
    color: var(--ht-foreground-color);
    /* Miscellaneous */
    touch-action: manipulation;

    // Scrollbars
    scrollbar-width: thin;
    scrollbar-color: var(--ht-scrollbar-thumb-color)
      var(--ht-scrollbar-track-color);

    // Styles for browsers that don't support scrollbar-width and scrollbar-color
    .wtHolder {
      &::-webkit-scrollbar {
        width: 9px;
        height: 9px;
      }

      &::-webkit-scrollbar-track {
        background: var(--ht-scrollbar-track-color);
        border-radius: var(--ht-scrollbar-border-radius);
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--ht-scrollbar-thumb-color);
        border-radius: var(--ht-scrollbar-border-radius);
      }

      &::-webkit-scrollbar-corner {
        background: var(--ht-scrollbar-track-color);
        border-end-end-radius: var(--ht-scrollbar-border-radius);
      }
    }

    // Wrapper
    &.ht-wrapper {
      border-radius: var(--ht-wrapper-border-radius, 0);

      &:not(.htFirstDatasetColumnNotRendered) {
        td {
          &:first-of-type {
            border-inline-start-width: 1px;
          }
        }
      }

      &::before {
        @include mixins.pseudo();

        position: absolute;
        inset: 0;
        border: var(--ht-wrapper-border-width) solid
          var(--ht-wrapper-border-color);
        border-radius: var(--ht-wrapper-border-radius, 0);
        z-index: 999;
        pointer-events: none;
        overflow: hidden;
      }
    }

    // Force the ghost table to ignore the additional 1px border for the first rows in the table
    &.htGhostTable {
      table {
        thead {
          th {
            border-bottom-width: 0;
          }
        }

        tbody {
          tr {
            &:first-of-type {
              th,
              td {
                &:first-child {
                  height: calc(
                    var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 1px
                  )
                }
              }
            }

            th,
            td {
              border-top-width: 0;
              height: calc(
                var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 1px
              )
            }
          }
        }

        &.htGhostTableFirstRow tbody {
          tr {
            th,
            td {
              border-top-width: 1px;
              height: calc(
                var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) +
                  2px
              );
            }
          }
        }
      }
    }

    &.htHasScrollX:not(.htHorizontallyScrollableByWindow),
    &.htHasScrollY:not(.htVerticallyScrollableByWindow) {
      .ht_master {
        .wtHolder {
          border-radius: var(--ht-wrapper-border-radius, 0);
        }
      }
    }

    &:not(.htHorizontallyScrollableByWindow),
    &:not(.htVerticallyScrollableByWindow) {
      .ht_master {
        .wtHolder {
          background-color: var(--ht-background-color);
        }
      }
    }

    // Row even & odd
    tr {
      &.ht__row_even {
        th {
          background-color: var(--ht-row-header-even-background-color);
        }

        td {
          background-color: var(--ht-row-cell-even-background-color);
        }
      }

      &.ht__row_odd {
        th {
          background-color: var(--ht-row-header-odd-background-color);
        }

        td {
          background-color: var(--ht-row-cell-odd-background-color);
        }
      }
    }

    // Cell and Header
    th,
    td {
      height: calc(
        var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 1px
      );
      padding: var(--ht-cell-vertical-padding) var(--ht-cell-horizontal-padding);
      vertical-align: top;
      border-top-width: 0;
      border-inline-start-width: 0;
      border-inline-end-width: 1px;
      border-bottom-width: 1px;
      border-style: solid;
      font-size: var(--ht-font-size);
      line-height: var(--ht-line-height);
      white-space: pre-wrap;
      overflow: hidden;
      outline: none;
      outline-width: 0;
      empty-cells: show;
      box-sizing: border-box;
      color: var(--ht-foreground-color);
      border-top-color: var(--ht-cell-vertical-border-color);
      border-bottom-color: var(--ht-cell-vertical-border-color);
      border-inline-start-color: var(--ht-cell-horizontal-border-color);
      border-inline-end-color: var(--ht-cell-horizontal-border-color);

      &.invisibleSelection {
        outline: none;

        &::selection {
          background: transparent;
        }
      }
    }

    // Header
    th {
      position: relative;
      overflow: visible;
      text-align: center;
      font-weight: var(--ht-header-font-weight);
      white-space: nowrap;
      color: var(--ht-header-foreground-color);
      background-color: var(--ht-header-background-color);

      &:last-child {
        /* Foundation framework fix */
        border-inline-start-width: 0;
        border-inline-end-width: 1px;
        border-bottom-width: 1px;
        border-inline-end-color: var(--ht-border-color);

        &.ht__active_highlight {
          border-inline-end-color: var(--ht-header-active-border-color);
        }
      }

      &:first-child {
        border-inline-start-color: var(--ht-border-color);

        &.ht__active_highlight {
          border-inline-start-color: var(--ht-header-active-border-color);
        }
      }

      &:first-child,
      &:nth-child(2) {
        border-inline-start-width: 1px;
      }

      &.current {
        box-shadow: inset 0 0 0 1px var(--ht-cell-selection-border-color);
      }

      &.active {
        color: var(--ht-header-active-foreground-color);
        background-color: var(--ht-header-active-background-color);
      }

      &.ht__highlight {
        color: var(--ht-header-highlighted-foreground-color);
        background-color: var(--ht-header-highlighted-background-color);
      }

      &.ht__active_highlight {
        border-color: var(--ht-header-active-border-color);
        color: var(--ht-header-active-foreground-color);
        background-color: var(--ht-header-active-background-color);
      }
    }

    // Header in Row
    tbody {
      tr {
        &.ht__row_odd,
        &.ht__row_even {
          th {
            &.ht__highlight {
              color: var(--ht-header-row-highlighted-foreground-color);
              background-color: var(
                --ht-header-row-highlighted-background-color
              );
            }

            &.ht__active_highlight {
              color: var(--ht-header-row-active-foreground-color);
              background-color: var(--ht-header-row-active-background-color);
            }
          }
        }

        // compensates the top border width of the first row
        &:first-of-type {
          th,
          td {
            &:first-child {
              height: calc(
                var(--ht-cell-vertical-padding) * 2 + var(--ht-line-height) + 2px
              );
            }
          }
        }

        th {
          padding: 0;
          color: var(--ht-header-row-foreground-color);
          background-color: var(--ht-header-row-background-color);

          &.ht__active_highlight {
            box-shadow: 0 -1px 0 0 var(--ht-header-active-border-color);
          }

          .relative {
            padding: var(--ht-cell-vertical-padding)
              var(--ht-cell-horizontal-padding);
            height: 100%;
          }
        }

        td {
          &:first-child {
            border-inline-start-color: var(--ht-border-color);
          }

          &:last-child {
            border-inline-end-color: var(--ht-border-color);
          }
        }
      }
    }

    // Header in Col
    thead {
      tr {
        th {
          padding: 0;

          &.ht__active_highlight {
            box-shadow: -1px 0 0 0 var(--ht-header-active-border-color);
          }

          .relative {
            padding: var(--ht-cell-vertical-padding)
              var(--ht-cell-horizontal-padding);

            .colHeader {
              text-overflow: ellipsis;
              overflow: hidden;
              vertical-align: top;
              max-width: calc(100% + 1px);
            }

            &:has(.collapsibleIndicator, .changeType) {
              .colHeader {
                max-width: calc(
                  100% - (var(--ht-icon-size) + var(--ht-gap-size))
                );
              }
            }
          }
        }
      }
    }

    tr:first-child {
      th,
      td {
        border-top-color: var(--ht-border-color);
        border-top-width: 1px;

        &.ht__active_highlight {
          border-top-color: var(--ht-header-active-border-color);
        }
      }
    }

    tr:last-child {
      th,
      td {
        border-bottom-color: var(--ht-border-color);

        &.ht__active_highlight {
          border-bottom-color: var(--ht-header-active-border-color);
        }
      }
    }

    // header highlight line
    div[class^="ht_clone"] {
      thead {
        .ht__highlight {
          .relative {
            &::after {
              @include mixins.pseudo();

              position: absolute;
              left: -1px;
              right: -1px;
              bottom: -1px;
              height: var(--ht-header-highlighted-shadow-size);
              background-color: var(--ht-accent-color);
            }
          }
        }

        tr:only-of-type {
          .ht__highlight {
            .relative {
              &::after {
                bottom: 0;
              }
            }
          }
        }
      }

      tbody {
        .ht__highlight {
          .relative {
            &::after {
              @include mixins.pseudo();

              position: absolute;
              top: -1px;
              right: -1px;
              bottom: -1px;
              width: var(--ht-header-highlighted-shadow-size);
              background-color: var(--ht-accent-color);
            }
          }
        }
      }

      // Cell
      td {
        &:first-of-type {
          border-inline-start-width: 1px;
        }
      }
    }

    thead tr:not(:last-child) th {
      /* Fix for - nested columns with hidden column  */
      overflow: hidden;
    }

    // Base classes
    .hide {
      display: none;
    }

    .relative {
      position: relative;
      box-sizing: border-box;
    }

    .wtHider {
      width: 0;
    }

    .wtSpreader {
      position: relative;
      /* must be 0, otherwise blank space appears in scroll demo after scrolling max to the right */
      width: 0;
      height: auto;
    }

    .htAutoSize {
      position: absolute;
      left: -99000px;
      top: -99000px;
      visibility: hidden;
    }

    .htTextEllipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    table,
    tbody,
    thead,
    input,
    textarea,
    div {
      box-sizing: content-box;
    }

    input,
    textarea {
      min-height: initial;
    }

    .htCore {
      width: 0;
      margin: 0;
      border-width: 0;
      border-spacing: 0;
      border-collapse: separate;
      outline-width: 0;
      table-layout: fixed;
      cursor: default;
      background-color: var(--ht-background-color);
    }

    col {
      width: 64px;

      &.rowHeader {
        width: 64px;
      }

      &.hidden {
        width: 0 !important;
      }
    }

    span {
      &.colHeader,
      &.rowHeader {
        display: inline-block;
        font-size: var(--ht-font-size);
        line-height: var(--ht-line-height);
      }
    }

    tr.hidden {
      display: none;

      td,
      th {
        display: none;
      }
    }

    a {
      color: var(--ht-link-color);

      &:hover {
        color: var(--ht-link-hover-color);
      }
    }

    // Visual fixes
    // It removes double right border from first column header when row headers are disabled
    .ht_clone_top th:nth-child(2) {
      border-inline-start-width: 0;
      border-inline-end-width: 1px;
    }

    &.htRowHeaders thead tr th:nth-child(2) {
      border-inline-start-width: 1px;
    }

    .ht_master:not(.innerBorderInlineStart):not(.emptyColumns) {
      tbody tr th,
      thead tr th:first-child,
      ~ .handsontable:not(.htGhostTable) tbody tr th,
      ~ .handsontable:not(.ht_clone_top):not(.htGhostTable)
        thead
        tr
        th:first-child {
        border-inline-end-width: 0;
        border-inline-start-width: 1px;
      }
    }

    //  innerBorderTop - Property controlled by top overlay
    //  innerBorderBottom - Property controlled by bottom overlay
    .ht_master:not(.innerBorderTop):not(.innerBorderBottom) {
      thead tr:last-child th,
      & ~ .handsontable thead tr:last-child th,
      thead tr.lastChild th,
      & ~ .handsontable thead tr.lastChild th {
        border-bottom-width: 0;
      }
    }

    .ht_master.innerBorderTop {
      tbody {
        tr:first-child {
          th,
          td {
            border-top-width: 0;
          }
        }
      }

      & ~ .ht_clone_inline_start {
        tbody {
          tr:first-child {
            th,
            td {
              border-top-width: 0;
            }
          }
        }
      }
    }

    .ht_master table.htCore > thead,
    .ht_master table.htCore > tbody > tr > th,
    .ht_clone_inline_start table.htCore > thead {
      visibility: hidden;
    }
  }

  .ht_master,
  .ht_clone_inline_start,
  .ht_clone_top,
  .ht_clone_bottom {
    overflow: hidden;

    .wtHolder {
      overflow: hidden;
    }
  }

  .ht_master .wtHolder {
    overflow: auto;
  }

  [dir="rtl"].handsontable {
    td[dir="ltr"] {
      border-inline-end-width: 0;
      border-inline-start-width: 1px;
    }

    tbody {
      tr {
        td[dir="ltr"] {
          &:last-child {
            border-inline-start-color: var(--ht-border-color);
          }
        }
      }
    }

    // header highlight line rtl fix
    div[class^="ht_clone"] tbody .ht__highlight .relative::after {
      right: auto;
      left: -1px;
    }
  }

  // Fix for Safari custom scrollbar size calculation
  .htScrollbarSafariTest {
    &::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }
  }
}
